<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/dark/main.css">
<title>ARCGIS API 所有按钮</title>
<style>
    .action-button {
        font-size: 16px;
        background-color: transparent;
		 /*👆或者rgba(0,0,0,0)*/ 
        border: 1px solid #D3D3D3;
        color: #6e6e6e;/*文字颜色*/
        height: 40px;
        width: 40px;
        text-align: center;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    }
    .action-button:hover,.action-button:focus {
        background: #0079c1;
        color: #e4e4e4;
    }
</style>
</head>
<body>
    <div id="按钮集合">
        <button class="action-button esri-icon-close" type="button" title=""></button>
        <button class="action-button esri-icon-drag-horizontal" type="button" title=""></button>
        <button class="action-button esri-icon-drag-vertical" type="button" title=""></button>
        <button class="action-button esri-icon-handle-horizontal" type="button" title=""></button>
        <button class="action-button esri-icon-handle-vertical" type="button" title=""></button>
        <button class="action-button esri-icon-check-mark" type="button" title=""></button>
        <button class="action-button esri-icon-left-triangle-arrow" type="button" title=""></button>
        <button class="action-button esri-icon-right-triangle-arrow" type="button" title=""></button>
        <button class="action-button esri-icon-down-arrow" type="button" title=""></button>
        <button class="action-button esri-icon-up-arrow" type="button" title=""></button>
        <button class="action-button esri-icon-overview-arrow-bottom-left" type="button" title=""></button>
        <button class="action-button esri-icon-overview-arrow-bottom-right" type="button" title=""></button>
        <button class="action-button esri-icon-overview-arrow-top-left" type="button" title=""></button>
        <button class="action-button esri-icon-overview-arrow-top-right" type="button" title=""></button>
        <button class="action-button esri-icon-maximize" type="button" title=""></button>
        <button class="action-button esri-icon-minimize" type="button" title=""></button>
        <button class="action-button esri-icon-checkbox-unchecked" type="button" title=""></button>
        <button class="action-button esri-icon-checkbox-checked" type="button" title=""></button>
        <button class="action-button esri-icon-radio-unchecked" type="button" title=""></button>
        <button class="action-button esri-icon-radio-checked" type="button" title=""></button>
        <button class="action-button esri-icon-up-arrow-circled" type="button" title=""></button>
        <button class="action-button esri-icon-down-arrow-circled" type="button" title=""></button>
        <button class="action-button esri-icon-left-arrow-circled" type="button" title=""></button>
        <button class="action-button esri-icon-right-arrow-circled" type="button" title=""></button>
        <button class="action-button esri-icon-zoom-out-fixed" type="button" title=""></button>
        <button class="action-button esri-icon-zoom-in-fixed" type="button" title=""></button>
        <button class="action-button esri-icon-refresh" type="button" title=""></button>
        <button class="action-button esri-icon-edit" type="button" title=""></button>
        <button class="action-button esri-icon-authorize" type="button" title=""></button>
        <button class="action-button esri-icon-map-pin" type="button" title=""></button>
        <button class="action-button esri-icon-blank-map-pin" type="button" title=""></button>
        <button class="action-button esri-icon-table" type="button" title=""></button>
        <button class="action-button esri-icon-plus" type="button" title=""></button>
        <button class="action-button esri-icon-minus" type="button" title=""></button>
        <button class="action-button esri-icon-beginning" type="button" title=""></button>
        <button class="action-button esri-icon-reverse" type="button" title=""></button>
        <button class="action-button esri-icon-pause" type="button" title=""></button>
        <button class="action-button esri-icon-play" type="button" title=""></button>
        <button class="action-button esri-icon-forward" type="button" title=""></button>
        <button class="action-button esri-icon-end" type="button" title=""></button>
        <button class="action-button esri-icon-erase" type="button" title=""></button>
        <button class="action-button esri-icon-up-down-arrows" type="button" title=""></button>
        <button class="action-button esri-icon-left" type="button" title=""></button>
        <button class="action-button esri-icon-right" type="button" title=""></button>
        <button class="action-button esri-icon-announcement" type="button" title=""></button>
        <button class="action-button esri-icon-notice-round" type="button" title=""></button>
        <button class="action-button esri-icon-notice-triangle" type="button" title=""></button>
        <button class="action-button esri-icon-home" type="button" title=""></button>
        <button class="action-button esri-icon-locate" type="button" title=""></button>
        <button class="action-button esri-icon-expand" type="button" title=""></button>
        <button class="action-button esri-icon-collapse" type="button" title=""></button>
        <button class="action-button esri-icon-layer-list" type="button" title=""></button>
        <button class="action-button esri-icon-basemap" type="button" title=""></button>
        <button class="action-button esri-icon-globe" type="button" title=""></button>
        <button class="action-button esri-icon-applications" type="button" title=""></button>
        <button class="action-button esri-icon-arrow-up-circled" type="button" title=""></button>
        <button class="action-button esri-icon-arrow-down-circled" type="button" title=""></button>
        <button class="action-button esri-icon-arrow-left-circled" type="button" title=""></button>
        <button class="action-button esri-icon-arrow-right-circled" type="button" title=""></button>
        <button class="action-button esri-icon-minus-circled" type="button" title=""></button>
        <button class="action-button esri-icon-plus-circled" type="button" title=""></button>
        <button class="action-button esri-icon-add-attachment" type="button" title=""></button>
        <button class="action-button esri-icon-attachment" type="button" title=""></button>
        <button class="action-button esri-icon-calendar" type="button" title=""></button>
        <button class="action-button esri-icon-close-circled" type="button" title=""></button>
        <button class="action-button esri-icon-browser" type="button" title=""></button>
        <button class="action-button esri-icon-collection" type="button" title=""></button>
        <button class="action-button esri-icon-comment" type="button" title=""></button>
        <button class="action-button esri-icon-configure-popup" type="button" title=""></button>
        <button class="action-button esri-icon-contact" type="button" title=""></button>
        <button class="action-button esri-icon-dashboard" type="button" title=""></button>
        <button class="action-button esri-icon-deny" type="button" title=""></button>
        <button class="action-button esri-icon-description" type="button" title=""></button>
        <button class="action-button esri-icon-directions" type="button" title=""></button>
        <button class="action-button esri-icon-directions2" type="button" title=""></button>
        <button class="action-button esri-icon-documentation" type="button" title=""></button>
        <button class="action-button esri-icon-duplicate" type="button" title=""></button>
        <button class="action-button esri-icon-review" type="button" title=""></button>
        <button class="action-button esri-icon-environment-settings" type="button" title=""></button>
        <button class="action-button esri-icon-error" type="button" title=""></button>
        <button class="action-button esri-icon-error2" type="button" title=""></button>
        <button class="action-button esri-icon-experimental" type="button" title=""></button>
        <button class="action-button esri-icon-feature-layer" type="button" title=""></button>
        <button class="action-button esri-icon-filter" type="button" title=""></button>
        <button class="action-button esri-icon-grant" type="button" title=""></button>
        <button class="action-button esri-icon-group" type="button" title=""></button>
        <button class="action-button esri-icon-key" type="button" title=""></button>
        <button class="action-button esri-icon-labels" type="button" title=""></button>
        <button class="action-button esri-icon-tag" type="button" title=""></button>
        <button class="action-button esri-icon-layers" type="button" title=""></button>
        <button class="action-button esri-icon-left-arrow" type="button" title=""></button>
        <button class="action-button esri-icon-right-arrow" type="button" title=""></button>
        <button class="action-button esri-icon-link-external" type="button" title=""></button>
        <button class="action-button esri-icon-link" type="button" title=""></button>
        <button class="action-button esri-icon-loading-indicator" type="button" title=""></button>
        <button class="action-button esri-icon-maps" type="button" title=""></button>
        <button class="action-button esri-icon-marketplace" type="button" title=""></button>
        <button class="action-button esri-icon-media" type="button" title=""></button>
        <button class="action-button esri-icon-media2" type="button" title=""></button>
        <button class="action-button esri-icon-menu" type="button" title=""></button>
        <button class="action-button esri-icon-mobile" type="button" title=""></button>
        <button class="action-button esri-icon-phone" type="button" title=""></button>
        <button class="action-button esri-icon-navigation" type="button" title=""></button>
        <button class="action-button esri-icon-pan" type="button" title=""></button>
        <button class="action-button esri-icon-printer" type="button" title=""></button>
        <button class="action-button esri-icon-pie-chart" type="button" title=""></button>
        <button class="action-button esri-icon-chart" type="button" title=""></button>
        <button class="action-button esri-icon-line-chart" type="button" title=""></button>
        <button class="action-button esri-icon-question" type="button" title=""></button>
        <button class="action-button esri-icon-resend-invitation" type="button" title=""></button>
        <button class="action-button esri-icon-rotate" type="button" title=""></button>
        <button class="action-button esri-icon-save" type="button" title=""></button>
        <button class="action-button esri-icon-settings" type="button" title=""></button>
        <button class="action-button esri-icon-settings2" type="button" title=""></button>
        <button class="action-button esri-icon-share" type="button" title=""></button>
        <button class="action-button esri-icon-sign-out" type="button" title=""></button>
        <button class="action-button esri-icon-support" type="button" title=""></button>
        <button class="action-button esri-icon-user" type="button" title=""></button>
        <button class="action-button esri-icon-time-clock" type="button" title=""></button>
        <button class="action-button esri-icon-trash" type="button" title=""></button>
        <button class="action-button esri-icon-upload" type="button" title=""></button>
        <button class="action-button esri-icon-download" type="button" title=""></button>
        <button class="action-button esri-icon-zoom-in-magnifying-glass" type="button" title=""></button>
        <button class="action-button esri-icon-search" type="button" title=""></button>
        <button class="action-button esri-icon-zoom-out-magnifying-glass" type="button" title=""></button>
        <button class="action-button esri-icon-locked" type="button" title=""></button>
        <button class="action-button esri-icon-unlocked" type="button" title=""></button>
        <button class="action-button esri-icon-favorites" type="button" title=""></button>
        <button class="action-button esri-icon-compass" type="button" title=""></button>
        <button class="action-button esri-icon-down" type="button" title=""></button>
        <button class="action-button esri-icon-up" type="button" title=""></button>
        <button class="action-button esri-icon-chat" type="button" title=""></button>
        <button class="action-button esri-icon-dock-bottom" type="button" title=""></button>
        <button class="action-button esri-icon-dock-left" type="button" title=""></button>
        <button class="action-button esri-icon-dock-right" type="button" title=""></button>
        <button class="action-button esri-icon-organization" type="button" title=""></button>
        <button class="action-button esri-icon-north-navigation" type="button" title=""></button>
        <button class="action-button esri-icon-locate-circled" type="button" title=""></button>
        <button class="action-button esri-icon-dial" type="button" title=""></button>
        <button class="action-button esri-icon-polygon" type="button" title=""></button>
        <button class="action-button esri-icon-polyline" type="button" title=""></button>
        <button class="action-button esri-icon-visible" type="button" title=""></button>
        <button class="action-button esri-icon-non-visible" type="button" title=""></button>
        <button class="action-button esri-icon-link-vertical" type="button" title=""></button>
        <button class="action-button esri-icon-unlocked-link-vertical" type="button" title=""></button>
        <button class="action-button esri-icon-link-horizontal" type="button" title=""></button>
        <button class="action-button esri-icon-unlocked-link-horizontal" type="button" title=""></button>
        <button class="action-button esri-icon-swap" type="button" title=""></button>
        <button class="action-button esri-icon-cta-link-external" type="button" title=""></button>
        <button class="action-button esri-icon-reply" type="button" title=""></button>
        <button class="action-button esri-icon-public" type="button" title=""></button>
        <button class="action-button esri-icon-share2" type="button" title=""></button>
        <button class="action-button esri-icon-launch-link-external" type="button" title=""></button>
        <button class="action-button esri-icon-rotate-back" type="button" title=""></button>
        <button class="action-button esri-icon-pan2" type="button" title=""></button>
        <button class="action-button esri-icon-tracking" type="button" title=""></button>
        <button class="action-button esri-icon-expand2" type="button" title=""></button>
        <button class="action-button esri-icon-arrow-down" type="button" title=""></button>
        <button class="action-button esri-icon-arrow-up" type="button" title=""></button>
        <button class="action-button esri-icon-hollow-eye" type="button" title=""></button>
        <button class="action-button esri-icon-play-circled" type="button" title=""></button>
        <button class="action-button esri-icon-volume-off" type="button" title=""></button>
        <button class="action-button esri-icon-volume-on" type="button" title=""></button>
        <button class="action-button esri-icon-bookmark" type="button" title=""></button>
        <button class="action-button esri-icon-lightbulb" type="button" title=""></button>
        <button class="action-button esri-icon-sketch-rectangle" type="button" title=""></button>
        <button class="action-button esri-icon-north-navigation-filled" type="button" title=""></button>
        <button class="action-button esri-icon-default-action" type="button" title=""></button>
        <button class="action-button esri-icon-undo" type="button" title=""></button>
        <button class="action-button esri-icon-redo" type="button" title=""></button>
        <button class="action-button esri-icon-cursor" type="button" title=""></button>
        <button class="action-button esri-icon-cursor-filled" type="button" title=""></button>
        <button class="action-button esri-icon-measure-line"  type="button" title="Measure distance"></button>
        <button class="action-button esri-icon-measure"  type="button" title="Only Measure"></button>
        <button class="action-button esri-icon-measure-area"  type="button" title="Measure area"></button>
        <button class="action-button esri-icon-legend" type="button" title=""></button>
        <button class="action-button esri-icon-sliders" type="button" title=""></button>
        <button class="action-button esri-icon-sliders-horizontal"  type="button" title="" ></button>
        <button class="action-button esri-icon-cursor-marquee"      type="button" title=""></button>
        <button class="action-button esri-icon-lasso"      type="button" title=""></button>
    </div>
    <div style="font-size:25px;" id="按钮类名"></div>
</body>
<script>
    var 按钮集合=document.getElementById("按钮集合");
    for(let i=0;i<按钮集合.childNodes.length;i++){
        if(按钮集合.childNodes[i].tagName==="BUTTON"){
            按钮集合.childNodes[i].onclick=function(){
                document.getElementById("按钮类名").innerText= "ESRI类名称: "+按钮集合.childNodes[i].className;
            }
        }
    }
</script>
